<script setup>
import VisualLayout from '@/components/VisualLayout.vue'
const data = ref({
  list: [
    {
      type: 'structure',
      name: '构成',
      total: 15000,// 总数
      max: 14000,// 正常最大值
      min: 2000, // 正常最小值
      value: 13000 // 真实值
    },
    {
      type: 'before',
      name: '组立前',
      total: 15000,// 总数
      max: 10000,
      min: 1000,
      value: 750
    },
    {
      type: 'after',
      name: '组立后',
      total: 5000,
      max: 3000,
      min: 200,
      value: 250
    },
  ]
})
data.value.list.map(item => {
  item.isAbnormal = item.value > item.max || item.value < item.min
  if (item.value < item.min) {
    item.realyH = (item.value * 56 / item.min).toFixed(0) + 'px'
  } else if (item.value > item.max) {
    item.realyH = ((item.value - item.max) / (item.total - item.max) + 56 + 165).toFixed(0) + 'px'
  } else {
    item.realyH = ((item.value - item.min) / (item.max - item.min) * 165 + 56).toFixed(0) + 'px'
  }
})
</script>
<template>
  <VisualLayout>
    <div class="wrap">
      <div v-for="item in data.list" class="item">
        <div class="top">
          <div class="standard">
            <span class="title">标准在库</span>
            <div class="battery">
              <span class="max">{{ item.max }}</span>
              <span class="split"></span>
              <span class="value"></span>
              <span class="min">{{ item.min }}</span>
            </div>
          </div>
          <div class="actual">
            <span class="title">实际在库</span>
            <div class="battery">
              <span class="split">{{ item.value }}</span>
              <span class="value" :class="{ abnormal: item.isAbnormal }" :style="{ height: item.realyH }"></span>
            </div>
          </div>
        </div>
        <div class="base_title">{{ item.name }}</div>
      </div>
    </div>
  </VisualLayout>
</template>

<style lang="less" scoped>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  width: 504px;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px 20px;

  .top {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
    background: url(../assets/image/engineer/base_img.png) center bottom no-repeat;
    background-size: 100%;

    span {
      display: inline-block;

    }

    .title {
      font-size: 28px;
      padding: 15px;
    }

    .standard,
    .actual {
      .battery {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 138px;
        height: 334px;
        padding-top: 28px;
        padding-bottom: 25px;
        background: url(../assets/image/engineer/battery-bottom.png) 0 bottom no-repeat;

        &::after {
          display: none;
          content: '';
          display: block;
          height: 28px;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: url(../assets/image/engineer/battery-top.png) 0 0 no-repeat;
        }

        &::before {
          content: '';
          display: block;
          height: calc(100% - 20px - 23px);
          width: 100%;
          position: absolute;
          left: 0;
          top: 20px;
          background: url(../assets/image/engineer/battery-front.png) 0 0 no-repeat;
          background-size: 100% 100%;
          //z-index: 1000;
        }

        .min,
        .max {
          min-height: 56px;
          font-size: 24px;
          line-height: 1;
          font-weight: bold;

          &.max {
            border-bottom: 1px solid rgb(236, 222, 22);
            color: rgb(236, 222, 22);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            color: #6ee6b3;
          }

          &.min {
            border-top: 3px solid rgba(201, 57, 90, .8);
            border-radius: 2px;
            margin-top: 4px;
            color: #c9395a;
            padding-top: 5px;
          }
        }

        .split {
          flex: 1;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          font-size: 26px;
          // font-weight: bold;
        }

        .value {
          height: 100%;
          background: url(../assets/image/engineer/battery-item.png) center bottom repeat;
          background-size: 100%;

          &.abnormal {
            background: url(../assets/image/engineer/battery-item-red.png) center bottom repeat;
            background-size: 100%;
            animation: blink 1s infinite;
          }
        }
      }
    }

    .actual {
      margin-left: 18px;
    }
  }

  .base_title {
    width: 325px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: rgb(254, 254, 254);
    font-weight: bold;
    background: url(../assets/image/engineer/btn-bg.png) center bottom no-repeat;
    margin-top: 50px;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.blink {
  animation-name: blink;
  animation-duration: 1.5s;
  /* 设置动画持续时间为1秒 */
  animation-iteration-count: infinite;
}
</style>
